<!doctype html>
<html>
<head>
  <title>Learning javascript</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
  #circle {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: red;
  }
  </style>
</head>

<body>
<div>
  <div id="circle"></div>
  
  <button id="hideCircle">Click me to hide circle!</button>
  <script type="text/javascript">
    document.getElementById("hideCircle").onclick = function() {
      var circle = document.getElementById("circle");
      circle.parentNode.removeChild(circle);
      document.getElementById("hideCircle").disabled=true;
    }
  </script>
</div>
</body>
</html>
